<!--
 * @Descripttion: 统计数值组件演示
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年6月23日10:28:17
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="总资产" value="17075" suffix="条" description="资产总净值:￥4748207584" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="借用" value="17075" suffix="条" description="资产总净值:￥4748207584" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="在用" value="17075" suffix="条" description="资产总净值:￥4748207584" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="库存" value="17075" suffix="条" description="资产总净值:￥4748207584" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="已报废" value="0" suffix="条" description="资产总净值:￥0" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="4">
				<el-card shadow="never">
					<sc-statistic title="闲置" value="0" suffix="条" description="资产总净值:￥0" groupSeparator>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import scStatistic from '@/components/scStatistic';

	export default {
		name: 'statistic',
		components: {
			scStatistic
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.el-card {margin-bottom: 15px;}
	.up {color: #F56C6C;margin-left: 5px;}
	.down {color: #67C23A;margin-left: 5px;}
</style>
